<template>
	<view>
		<liu-drag-button v-show="showSearchBtn" @clickBtn="clickBtn" :bottomPx="200"
			>搜索</liu-drag-button
		>
		<uni-popup ref="popup" type="bottom" background-color="#fff" @change="changePopup">
			<view class="padding">
				<oc-form
					:options="formOptions"
					:defaultValue="searchform"
					confirmText="搜索"
					ref="ocForm"
					@confirm="search"
					@input="searchFormInput"
					showClearBtn
					clearBtnText="重置"
					@clear="clear" />
			</view>
		</uni-popup>
	</view>
</template>

<script>
import ocForm from "@/components/oc-com/oc-form/index.vue";

export default {
	components: {
		ocForm,
	},
	props: {
		options: {
			type: Array,
			default: () => {
				return [];
			},
		},
	},
	data() {
		return {
			searchform: {},
			showSearchBtn: true,
			formOptions: [],
			form: {},
		};
	},
	watch: {
		options: {
			handler(val) {
				this.formOptions = []
				val.forEach((item) => {
					let obj = {
						title: item.label,
						prop: item.name,
						type: item.type ? item.type : "text",
						placeholder: item.type ? "请选择" : "请输入",
						dicData: item.filters ? dicData : "",
						disabled: item.disabled ? item.disabled : false,
					};
					this.$set(this.searchform, item.name, "");
					this.formOptions.push(obj);
				});
			},
			immediate: true,
			deep: true,
		},
	},
	methods: {
		searchFormInput(form) {
			this.searchform[form.prop] = form.value;
		},
		changePopup(e) {
			this.showSearchBtn = !e.show;
		},
		clickBtn() {
			this.$refs.popup.open();
		},
		search(value) {
			this.$emit("searchChange", this.searchform);
			this.$refs.popup.close();
		},
		clear() {
			for (let key in this.searchform) {
				this.$set(this.searchform, key, "");
			}
			this.$refs.ocForm.initData(this.searchform);
			this.$emit("search", this.searchform);
		},
	},
};
</script>

<style></style>
